import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  SafeAreaView,
  ScrollView,
} from 'react-native';
import {Button} from '@rneui/themed';
import {changePwdByOld} from '@/apis/api';
import Overlay from '@/components/Overlay';
import {connect} from 'react-redux';
import {handleLogout} from '@/store/action/user';
import Toast from 'react-native-root-toast';
import {useTranslation} from 'react-i18next';
function ChangePasswordScreen({navigation, handleLogout}) {
  const {t} = useTranslation();
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    navigation.setOptions({
      headerShown: true,
      headerBackVisible: true,
    });
  }, []);
  const handleChangePassword = () => {
    if (
      oldPassword.length < 8 ||
      newPassword.length < 8 ||
      oldPassword.length > 16 ||
      newPassword.length > 16
    ) {
      Toast.show(t('sys_pwdLengthTip'), {
        duration: 1000,
        position: Toast.positions.CENTER,
      });
      return;
    } else if (newPassword !== confirmPassword) {
      Toast.show(t('sys_twoPasswordUnmatch'), {
        duration: 1000,
        position: Toast.positions.CENTER,
      });
      return;
    }
    handleChangePwdByOld();
  };
  const handleChangePwdByOld = async () => {
    setIsLoading(true);
    try {
      const res = await changePwdByOld({oldPassword, newPassword});
      handleLogout();
      navigation.navigate('Login');
    } catch (err) {
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Overlay isShow={isLoading} />
      <ScrollView contentContainerStyle={styles.contentContainer}>
        <Text h4 style={styles.title}>
          {t('sys_editPassword')}
        </Text>
        <View style={styles.content}>
          <TextInput
            style={styles.input}
            placeholder={t('sys_plsInputOldPwd')}
            value={oldPassword}
            onChangeText={setOldPassword}
            secureTextEntry
          />
          <TextInput
            style={styles.input}
            placeholder={t('sys_newPwdLengthTip')}
            value={newPassword}
            onChangeText={setNewPassword}
            secureTextEntry
          />
          <TextInput
            style={styles.input}
            placeholder={t('sys_plsConfirmNewPwd')}
            value={confirmPassword}
            onChangeText={setConfirmPassword}
            secureTextEntry
          />
          <Button
            radius={'md'}
            size="md"
            disabled={!oldPassword || !newPassword || !confirmPassword}
            title={t('sys_modify')}
            onPress={handleChangePassword}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default connect(
  state => ({
    userInfo: state.user.userInfo,
    auth: state.user.auth,
  }),
  dispatch => ({
    handleLogout: () => dispatch(handleLogout()),
  }),
)(ChangePasswordScreen);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  contentContainer: {
    width: '100%',
    flex: 1,
    justifyContent: 'center',
  },
  content: {
    width: '85%',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  title: {
    textAlign: 'center',
    fontSize: 24,
    color: '#333',
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    marginBottom: 20,
    borderRadius: 5,
    padding: 10,
  },
});
